<template>
  <div class="manager-container">
    <!-- 头部 -->
    <div class="manager-header">
      <div class="manager-header-left">
        <div class="title">心理健康管理</div>
      </div>

      <div class="manager-header-center">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- 主体 -->
    <div class="manager-main">
      <!-- 侧边栏 -->
      <div class="manager-main-left">
        <el-menu
            :default-openeds="['context','test', 'ask']"
            :default-active="$route.path"
            router
            style="border: none;"
        >
          <el-submenu index="context">
            <template slot="title">
              <el-menu-item index="/student/Context">心理健康教育概述</el-menu-item>
            </template>
          </el-submenu>
          <el-submenu index="test">
            <template slot="title">
              <el-menu-item index="/student/QuestionList">心理健康测试单</el-menu-item>
            </template>
          </el-submenu>
          <el-submenu index="ask">
            <template slot="title">
              <el-menu-item index="/student/PsychologicalAssessment">匿名提问</el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </div>

      <!-- 右侧内容区域 -->
      <div class="manager-main-right">
        <div class="content-area">
          <router-view />
        </div>
        <div class="video-area">
          <video controls style="width: 100%; height: 100%;">
            <source src="/xinli.mp4" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    currentTitle() {
      return this.$route.meta.name || '内容展示';
    },
  },
};
</script>

<style scoped>
.manager-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.manager-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: lightskyblue;
}

.manager-header-left .title {
  font-size: 20px; /* 增大标题字体 */
  font-weight: bold;
  color: white; /* 设置标题颜色为白色 */
}

.manager-main {
  display: flex;
  flex: 1;
}

.manager-main-left {
  width: 250px;
  border-right: 1px solid #e4e7ed;
}

.manager-main-right {
  flex-grow: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.content-area {
  flex: 1;
  margin-bottom: 20px; /* 在内容区和视频之间添加一些间距 */
}

.video-area {
  flex: 1; /* 使视频区域占据剩余空间 */
  position: relative;
}

.video-area video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使视频填满整个容器并保持宽高比 */
}
</style>